﻿<!DOCTYPE html>
<html>
<head>
<!--
    Copyright (c) Microsoft Corporation

All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0   

THIS CODE IS PROVIDED *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT.  

See the Apache Version 2.0 License for specific language governing permissions and limitations under the License.
 -->
    <meta charset="utf-8" />
    <title>YetiBowl Climber</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- YetiBowl references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/hiker.js"></script>

</head>
<body>
<div id="edit_temp" data-win-bind="className: isTemplate">
    <header aria-label="Header content" role="banner">
        <a class="win-backbutton" aria-label="Back" type="button" href="hikers.html"></a>
        <h1 data-win-bind="innerText: title"></h1>
    </header>
   
        <div id="edit_img_wrap" data-win-bind="className: color TemplateConverterFunctions.functions.hexColorToClass">
            <div class="edit_face_wrap">
                <img data-win-bind="src: compos_data_url" class="body" />
            </div>
        </div>

    <div class="controls_container">
        <div id="color_conf" class="edit_control_box" aria-haspopup="true">
            <div class="conf_inner_wrap">
                <div></div>
                <div><p>Color</p></div>
            </div>
        </div>

         <div id="pic_conf" class="edit_control_box" aria-haspopup="true">
            <div class="conf_inner_wrap">
                <div></div>
                <div><p>Photo</p></div>
            </div>
         </div>

        <div id="name_conf" class="edit_control_box" data-win-bind="title: title" aria-haspopup="true">
            <div class="conf_inner_wrap">
                <div></div>
                <div><p>Name</p></div>
            </div>
        </div>
        <div id="share" class="edit_control_box" aria-haspopup="true">
            <div class="conf_inner_wrap">
                <div></div>
                <div><p>Share</p></div>
            </div>
        </div>
    </div><!-- end .controls_container -->

 </div><!-- end #edit_temp -->

    <div id="colorFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm color flyout}">
        <div class="select_color_wrap">
            <div class="color_option color_333333" data-value="333333" data-color-frame="0"></div>
            <div class="color_option color_dc8000" data-value="dc8000" data-color-frame="1"></div>
            <div class="color_option color_00c0ac" data-value="00c0ac" data-color-frame="2"></div>
            <div class="color_option color_0096dc" data-value="0096dc" data-color-frame="3"></div>
        </div>
    </div>

    <div id="imageMenu" data-win-control="WinJS.UI.Menu" aria-label="{Image options menu flyout}">
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'fromcontacts', label:'Select from contacts...', type:'button'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'fromfile', label:'Select from file...', type:'button'}"></button>
    </div>

    <div id="nameFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm name flyout}">
        <input type="text" id="name" />
        <button id="name_save_button">Save</button>
    </div>

</body>
</html>
